
import { useState, useRef, useEffect } from 'react';
import './CustomerServiceChat.css';

const FAQS = [
  '如何选择会员版本',
  '玩法教程与帮助中心',
  '如何申请发票/查看订单',
  '稿豆相关',
  '如何取消自动续费',
  '授权相关',
];

const WELCOME = '欢迎使用稿定设计，点击“这里”查看客服帮助中心，如需人工客服帮助，请在对话框中输入“人工”。\n人工客服工作时间为工作日 09:30-12:00，13:30-18:00，非工作时间欢迎您留言，我们将在24小时内答复您。';

// 简单的关键词-回复映射
const BOT_ANSWERS: { keyword: string; answer: string }[] = [
  { keyword: '会员', answer: '您可以在个人中心选择不同的会员版本，享受更多权益。' },
  { keyword: '发票', answer: '如需开具发票，请在订单详情页申请，或联系客服协助。' },
  { keyword: '订单', answer: '订单相关问题可在“我的订单”中查看详情。' },
  { keyword: '人工', answer: '已为您转接人工客服，请稍候...' },
  { keyword: '稿豆', answer: '稿豆是平台虚拟积分，可用于兑换模板、素材等。' },
  { keyword: '续费', answer: '如需取消自动续费，请在账户设置中关闭自动续费功能。' },
  { keyword: '授权', answer: '授权相关问题可在帮助中心查看详细说明。' },
  { keyword: '帮助', answer: '您可以在帮助中心查找常见问题，也可直接留言咨询。' },
];

function getBotReply(input: string): string {
  const hit = BOT_ANSWERS.find(item => input.includes(item.keyword));
  if (hit) return hit.answer;
  if (input.trim().length < 2) return '请详细描述您的问题，方便为您解答。';
  return '感谢您的留言，我们会尽快回复您。';
}

function CustomerServiceChat() {
  const [messages, setMessages] = useState([
    { from: 'bot', text: WELCOME },
    { from: 'bot', text: '常见问题', faqs: FAQS },
  ]);
  const [input, setInput] = useState('');
  const chatRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    if (chatRef.current) {
      chatRef.current.scrollTop = chatRef.current.scrollHeight;
    }
  }, [messages]);

  const send = () => {
    if (!input.trim()) return;
    const userMsg = { from: 'user', text: input };
    const botMsg = { from: 'bot', text: getBotReply(input) };
    setMessages(msgs => [
      ...msgs,
      userMsg,
      botMsg,
    ]);
    setInput('');
  };

  return (
    <div className="cs-chat-wrap">
      <div className="cs-chat-header">稿定设计助手</div>
      <div className="cs-chat-main" ref={chatRef}>
        {messages.map((msg, i) => (
          <div key={i} className={`cs-msg cs-msg-${msg.from}`}>
            {msg.from === 'bot' && <div className="cs-bot-avatar">稿定</div>}
            <div className="cs-msg-content">
              {msg.text.split('\n').map((line, idx) => <div key={idx}>{line}</div>)}
              {msg.faqs && (
                <ul className="cs-faqs">
                  {msg.faqs.map((faq, idx) => (
                    <li key={idx} style={{ cursor: 'pointer', color: '#1677ff' }} onClick={() => {
                      const userMsg = { from: 'user', text: faq };
                      const botMsg = { from: 'bot', text: getBotReply(faq) };
                      setMessages(msgs => [
                        ...msgs,
                        userMsg,
                        botMsg,
                      ]);
                    }}>{faq}</li>
                  ))}
                </ul>
              )}
            </div>
          </div>
        ))}
      </div>
      <div className="cs-chat-input-bar">
        <input
          className="cs-chat-input"
          value={input}
          onChange={e => setInput(e.target.value)}
          placeholder="很高兴为您服务，请描述您的问题"
          onKeyDown={e => e.key === 'Enter' && send()}
        />
        <button className="cs-chat-send" onClick={send}>发送</button>
      </div>
    </div>
  );
}

export default CustomerServiceChat; 